<template>
	<view class="uni-margin-wrap">
		<uni-swiper-dot :info="imageList" :current="current"
			:dotsStyles="{backgroundColor: '#fff', selectedBackgroundColor: '#01b7ee'}">
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration"
				@change="change">
				<swiper-item v-for="(items,index) in imageList" :key="index">
					<image :src="items.img" :mode="modeFix" style="width: 100%;" lazy-load="true"
						@click="toProductDetail(items.url)"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		name: "swiperImg",
		props: {
			indicatorDots: {
				type: String,
				default: ''
			},
			autoplay: {
				type: String,
				default: ''
			},
			interval: {
				type: Number,
				default: 0
			},
			duration: {
				type: Number,
				default: 0
			},
			imageList: {
				type: Array
			},
			modeFix: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				list: [],
				mode: '',
				current: 0
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			toProductDetail(url) {
				uni.navigateTo({
					url: `/pagesA/category/goods/productDetails/productDetails?id=${ url }`
				})
			},
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
